import React, {useEffect} from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Text} from '@tarojs/components';
import {AtButton} from 'taro-ui';
import {Empty, Form, Button, Input, Radio} from '@nutui/nutui-react-taro';

import './index.scss'

function Recharge(props) {
    const {dispatch, mergeList: recordList = []} = props;
    const [form] = Form.useForm()
    useEffect(() => {
        dispatch({
            type: 'invoice/initStep2'
        });
        form.setFieldsValue({
            titleType: 0
        })
    }, [dispatch]);
    const submitFailed = (error) => {
        console.log('开票表单提交失败', error);
        Taro.showToast({title: '提交失败,请检查后重试', icon: 'none'})
    }

    const submitSucceed = (values) => {
        console.log('开票表单提交成功', values);
        // Taro.showToast({title: JSON.stringify(values), icon: 'success'})
        dispatch({
            type: 'invoice/applyInvoice',
            payload: {
                ...values,
                buyerAddress: '测试地址',
                remark: '测试备注',
            }
        })
    }
    // 税号正则
    const taxCodeValidator = (value) => {
        return /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(value)
    }
    return (
        <View className='rechargeWrap'>
            <View className='cardWrap' key='tips'>
                <View className='textLineNew'>
                    <View className='type'>开票须知</View>
                    <View className='cardTitle'>1. 开票金额为用户实际支付金额(不含返利返佣)</View>
                    <View className='cardTitle'>2. 电子发票会在开票确认后的20个工作日内开出</View>
                    <View className='cardTitle'>3. 单笔订单只支持开具一种发票类型</View>
                    <View className='cardTitle'>4.
                        金冠智充仅为平台方，实际开票主体以申请开票时展示的开票运营商公司为准</View>
                    <View className='cardTitle'>5. 发票由各家电站运营商提供，一起申请可能会生成多张发票</View>
                    <View className='cardTitle'>6.
                        若超过20个工作日仍未收到电子发票，您可以通过(区号)+12366向开票公司所在区域的主管税务机关进行反馈处理</View>
                </View>
            </View>
            <View className='listWrap'>
                <View className='formWrap'>
                    <Form
                        divider
                        form={form}
                        labelPosition="left"
                        onFinish={(values) => submitSucceed(values)}
                        onFinishFailed={(values, errors) => submitFailed(errors)}
                    >
                        <Form.Item
                            label="抬头类型"
                            name="titleType"
                            rules={[{required: true, message: '请选择抬头类型'}]}
                            // initialValue={0}
                        >
                            <Radio.Group>
                                <Radio value={0}>企业单位</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="企业名称"
                            name="titleName"
                            rules={[
                                {required: true, message: '请输入企业全称'}
                            ]}
                        >
                            <Input placeholder="请输入企业全称" type="text"/>
                        </Form.Item>
                        <Form.Item
                            label="企业税号"
                            name="taxCode"
                            rules={[
                                {required: true, message: '请输入企业税号'},
                                // {validator: taxCodeValidator, message: '请输入正确的税号'}
                            ]}
                        >
                            <Input placeholder="请输入企业税号" type="text"/>
                        </Form.Item>
                        <Form.Item
                            label="收票人姓名"
                            name="buyerName"
                            rules={[{required: true, message: '请输入收票人姓名'}]}
                        >
                            <Input placeholder="请输入收票人姓名" type="text"/>
                        </Form.Item>
                        <Form.Item
                            label="收票人电话"
                            name="buyerTel"
                            rules={[{required: true, message: '请输入收票人电话'}]}
                        >
                            <Input placeholder="请输入收票人电话" type="number"/>
                        </Form.Item>
                        <Form.Item
                            label="收票人邮箱"
                            name="buyerEmail"
                            rules={[{required: true, message: '请输入收票人邮箱'}]}
                        >
                            <Input placeholder="请输入收票人邮箱" type="text"/>
                        </Form.Item>
                    </Form>
                </View>
            </View>
            <View className='pageFooter'>
                <View className='secondLine'>
                    <View className='firstLine'>
                        <Text style={{fontSize: '36rpx', color: '#FA6400',}}>{recordList.length}</Text>张发票,
                        共<Text style={{fontSize: '36rpx', color: '#FA6400'}}>
                        {(recordList.reduce((pre, cur) => parseFloat(cur.sumActuallyAmount) + parseFloat(pre), 0) / 100).toFixed(2)}</Text>元
                    </View>
                    <View className='buttonInFooter'>
                        <AtButton
                            nativeType="submit"
                            disabled={!recordList.length}
                            // loading={startLoading}
                            onClick={() => {
                                console.log('申请开票');
                                form.submit()
                            }}
                        >申请开票</AtButton>
                    </View>
                </View>
            </View>
        </View>
    )
}

export default connect(({invoice}) => {
    return {...invoice}
})(Recharge)
